<template>
	<view :class="darkMode ? 'custom-dark' : 'custom-light'" class="w-h-100">
		<uni-section title="审批管理" type="line"></uni-section>
		<view class="example-body">
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item v-for="(menu, index) in userMenus" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons class="t-icon" :type="menu.MenuIcon" color="#007aff" size="48" />
						<text class="text">{{ menu.MenuName }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	computed: {
		...mapGetters(['themeBgColor', 'darkMode'])
	},
	onReady() {
		uni.setNavigationBarTitle({
			// title: this.$t('YzCloud'),
			title: '首页'
		})
		this.setNavBarColor()
	},
	onShow() {
		this.setNavBarColor()
	},
	data() {
		return {
			userMenus: [
				{
					MenuName: '报销申请',
					MenuIcon: 'chatboxes',
					MenuUrl: ''
				},
				{
					MenuName: '报修申请',
					MenuIcon: 'email',
					MenuUrl: ''
				},
				{
					MenuName: '出差申请',
					MenuIcon: 'star',
					MenuUrl: ''
				},
				{
					MenuName: '加班申请',
					MenuIcon: 'sound',
					MenuUrl: ''
				},
				{
					MenuName: '接待申请',
					MenuIcon: 'eye',
					MenuUrl: ''
				},
				{
					MenuName: '通用申请',
					MenuIcon: 'map',
					MenuUrl: ''
				},
				{
					MenuName: '用工申请',
					MenuIcon: 'person',
					MenuUrl: ''
				}
			]
		}
	},
	methods: {
		setNavBarColor() {
			// navBar-bg-color
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeBgColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		}
	}
}
</script>

<style>
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>
